<template>
	<view class="container">
		<view class="flex diygw-col-24 justify-between flex-nowrap flex-clz">
			<view class="flex diygw-col-3 avatar3-clz">
				<view @tap="navigateTo" data-type="page" data-url="/pages/chuangyezhegerenzhongxin" class="diygw-avatar sm white radius">
					<text class="diy-icon-back_android"></text>
				</view>
			</view>
			<view class="diygw-col-0 text1-clz"> 工商注册 </view>
			<view class="flex diygw-col-0 button-clz">
				<button class="diygw-btn white radius flex1 margin-xs button-button-clz">重置</button>
			</view>
		</view>
		<view class="diygw-form-item diygw-col-24">
			<view class="title"> 姓名 </view>
			<view class="input">
				<input class="flex1" name="input" comfirm-type="done" type="text" v-model="input" placeholder="请输入提示信息" />
			</view>
		</view>
		<view class="diygw-form-item diygw-col-24">
			<view class="title"> 联系电话 </view>
			<view class="input">
				<input class="flex1" name="input1" comfirm-type="done" type="text" v-model="input1" placeholder="请输入提示信息" />
			</view>
		</view>
		<view class="diygw-form-item diygw-col-24">
			<view class="title"> 经营类别 </view>
			<view class="input">
				<picker @change="changeSct" :value="sctIndex" :range="sctDatas" range-key="label">
					<view class="picker-item" v-if="sctIndex >= 0">
						{{ sctDatas[sctIndex].label }}
					</view>
					<view class="picker-item" v-else> 请选择 </view>
				</picker>
				<input hidden type="hidden" name="sctIndex" :value="sctIndex" />
				<input hidden type="hidden" name="sct" :value="sct" />
				<input hidden type="hidden" name="sctLabel" :value="sctLabel" />
			</view>
		</view>
		<view class="diygw-form-item diygw-col-24">
			<view class="title"> 业务类别 </view>
			<view class="input">
				<picker @change="changeSct1" :value="sct1Index" :range="sct1Datas" range-key="label">
					<view class="picker-item" v-if="sct1Index >= 0">
						{{ sct1Datas[sct1Index].label }}
					</view>
					<view class="picker-item" v-else> 请选择 </view>
				</picker>
				<input hidden type="hidden" name="sct1Index" :value="sct1Index" />
				<input hidden type="hidden" name="sct1" :value="sct1" />
				<input hidden type="hidden" name="sct1Label" :value="sct1Label" />
			</view>
		</view>
		<view class="diygw-col-0 text-clz"> 请选择支付方式 </view>
		<view class="flex flex-wrap diygw-col-24 justify-start items-center flex2-clz">
			<view class="diygw-form-item diygw-col-0 flex-direction-column">
				<view class="input">
					<radio-group class="flex flex-wrap check-green diygw-col-24 flex-direction-column justify-between" @change="changeRadio" name="radio">
						<label v-for="(item, index) in radioDatas" class="diygw-radio-label">
							<radio class="diygw-radio" :value="item.value" :checked="item.checked"> </radio>
							<view class="diygw-icon-radio" :class="item.checked ? 'checked' : ''"></view>
							<view class="diygw-checkbox-text">
								{{ item.label }}
							</view>
						</label>
					</radio-group>
					<input hidden type="hidden" name="radioLabel" :value="radioLabel" />
				</view>
			</view>
		</view>
		<view class="flex flex-wrap diygw-col-24 diygw-bottom flex3-clz diygw-bg">
			<view class="diygw-col-0 text2-clz"> 代理费用：368 </view>
			<view class="flex diygw-col-0 button1-clz">
				<button class="diygw-btn orange radius flex1 margin-xs button1-button-clz">立即支付</button>
			</view>
		</view>
		<view class="flex flex-wrap diygw-col-24 flex-direction-column diygw-bottom flex4-clz">
			<view class="diygw-form-item diygw-col-24">
				<view class="title title-mb5"></view>
				<view class="input">
					<checkbox-group class="flex flex-wrap check-green diygw-col-24 justify-between" @change="changeCheckbox" name="checkbox">
						<label v-for="(item, index) in checkboxDatas" class="diygw-checkbox-label">
							<checkbox class="diygw-checkbox" :value="item.value" :checked="item.checked"> </checkbox>
							<view class="diygw-icon-checkbox" :class="item.checked ? 'checked' : ''"></view>
							<view>
								{{ item.label }}
							</view>
						</label>
					</checkbox-group>
					<input hidden type="hidden" name="checkboxLabel" :value="checkboxLabel" />
				</view>
			</view>
		</view>
		<view class="version text-grey flex-direction-column flex diygw-col-24 justify-center align-center">
			<view> DIY官网提供技术支持 </view>
			<view> http://www.diygw.com </view>
		</view>
		<view class="clearfix"></view>
	</view>
</template>

<script>
	//create by: 邓志锋 <280160522@qq.com> <https://www.diygw.com> DIYGW可视化设计一键生成源码
	export default {
		data() {
			return {
				//用户全局信息
				userInfo: {},
				input: '',
				input1: '',
				sctDatas: [
					{ value: '1', label: '个体' },
					{ value: '2', label: '企业' }
				],
				sctIndex: 0,
				sct: '1',
				sctLabel: '个体',
				sct1Datas: [
					{ value: '1', label: '工商注册' },
					{ value: '2', label: '代理记账' }
				],
				sct1Index: 1,
				sct1: '2',
				sct1Label: '代理记账',
				radioDatas: [
					{ value: '1', label: '微信支付', checked: true },
					{ value: '2', label: '支付宝支付', checked: false }
				],
				radio: '1',
				radioLabel: '',
				checkboxDatas: [{ value: '1', label: '支付前请阅读《创客使用协议》', checked: true }],
				checkbox: ['1'],
				checkboxLabel: `支付前请阅读《创客使用协议》`
			};
		},
		onShow() {
			this.setCurrentPage(this);
		},
		onLoad(option) {
			this.setCurrentPage(this);
			if (option) {
				this.setData({
					globalOption: this.getOption(option)
				});
			}

			this.init();
		},
		methods: {
			async init() {},
			changeSct(e) {
				let sctIndex = e.detail.value;
				let sctDatas = this.sctDatas;
				let sctLabel = sctDatas[sctIndex].label;
				let sct = sctDatas[sctIndex].value;

				this.sctIndex = sctIndex;
				this.sctLabel = sctLabel;
				this.sct = sct;
			},
			changeSct1(e) {
				let sct1Index = e.detail.value;
				let sct1Datas = this.sct1Datas;
				let sct1Label = sct1Datas[sct1Index].label;
				let sct1 = sct1Datas[sct1Index].value;

				this.sct1Index = sct1Index;
				this.sct1Label = sct1Label;
				this.sct1 = sct1;
			},
			changeRadio(evt) {
				let value = evt.detail.value;
				let radioDatas = this.radioDatas;

				let radioLabel = this.radioLabel;
				for (var i = 0, len = radioDatas.length; i < len; ++i) {
					radioDatas[i].checked = radioDatas[i].value == value;
					if (radioDatas[i].checked) {
						radioLabel = radioDatas[i].label;
					}
				}
				this.radioLabel = radioLabel;
				this.radioDatas = radioDatas;
			},
			changeCheckbox(evt) {
				let values = evt.detail.value;
				let checkboxDatas = this.checkboxDatas;
				let checkboxLabels = [];
				let checkbox = [];
				for (var i = 0, len = checkboxDatas.length; i < len; ++i) {
					const item = checkboxDatas[i];

					if (values.includes(item.value)) {
						this.$set(item, 'checked', true);
					} else {
						this.$set(item, 'checked', false);
					}
					if (item['checked']) {
						checkboxLabels.push(item['label']);
						checkbox.push(item['value']);
					}
				}
				let checkboxLabel = checkboxLabels.join(',');
				this.checkboxLabel = checkboxLabel;
				this.checkbox = checkbox;
				this.checkboxDatas = checkboxDatas;
			}
		}
	};
</script>

<style lang="scss" scoped>
	.flex-clz {
		flex: 1;
	}
	.avatar3-clz {
		margin-left: 10px;
		font-weight: bold;
		width: calc(12.5% - 10px - 5px) !important;
		font-size: 16px;
		margin-top: 10px;
		margin-bottom: 5px;
		margin-right: 5px;
	}
	.text1-clz {
		padding-top: 8px;
		font-weight: bold;
		padding-left: 0px;
		padding-bottom: 0px;
		text-align: center;
		padding-right: 0px;
	}
	.button-clz {
		padding-top: 0px;
		padding-left: 0px;
		padding-bottom: 0px;
		padding-right: 0px;
	}
	.button-button-clz {
		font-size: 9px !important;
		margin: 3px !important;
	}
	.text-clz {
		margin-left: 5px;
		font-weight: bold;
		font-size: 14px;
		margin-top: 20px;
		margin-bottom: 5px;
		margin-right: 5px;
	}
	.flex2-clz {
		margin-left: 5px;
		width: calc(100% - 5px - 5px) !important;
		margin-top: 6px;
		margin-bottom: 5px;
		margin-right: 5px;
	}
	.flex3-clz {
		--diygw-image: linear-gradient(147deg, #ffe53b 0%, #ff2525 74%);
		left: 0px;
		bottom: 0px;
		width: 60px;
		right: 0px;
	}
	.text2-clz {
		margin-left: 5px;
		padding-top: 9px;
		padding-left: 0px;
		font-size: 21px;
		padding-bottom: 0px;
		font-family: 楷体;
		margin-bottom: 5px;
		margin-right: 15px;
		padding-right: 5px;
	}
	.button1-clz {
		flex: 1;
	}
	.button1-button-clz {
		margin: 3px !important;
	}
	.flex4-clz {
		left: 0px;
		bottom: 43px;
		width: 60px;
		right: 0px;
	}
	.container {
		padding-left: 0px;
		padding-right: 0px;

		font-size: 12px;
	}
	.container {
	}
</style>
